<template>
  <div class="approve">
    <div class="head">
        <div class="top-bar">
          <div class="title-con">
            <mt-navbar v-model="selected" refs="navTitle" class="navbar">
              <mt-tab-item :class="{'tab-item-leader':tableader}" id="A">我的待办
                <span class="tip" v-if="num !== 0">{{num}}</span>
              </mt-tab-item>
              <mt-tab-item :class="{'tab-item-leader':tableader}" id="B">我的已办</mt-tab-item>
              <mt-tab-item :class="{'tab-item-leader':tableader}" id="C">我发起的</mt-tab-item>
            </mt-navbar>
          </div>
        </div>
        <!-- <div class="searchApprove">
          <i class="icon-search"></i>
          <span>搜索</span>
        </div> -->
    </div>

    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="A">
        <v-scroll  v-if ="waiteDataList && waiteDataList.length" :on-refresh="onRefresh"  :on-infinite="onInfinite" :dataList="scrollData">
            <v-item  v-for="item in waiteDataList"  :itemData="item"></v-item>
        </v-scroll>
        <div v-if = 'waiteDataListShow'>
            <div class="null-container" >

            </div> 
            <p class="nodate">暂无数据</p>      
        </div> 

          
      </mt-tab-container-item>
      <mt-tab-container-item id="B">
        <v-scroll  v-if ="doneDataList && doneDataList.length" :on-refresh="onRefresh"  :on-infinite="onInfinite"  :dataList="scrollData">
            <v-item  v-for="item in doneDataList"  type="done" :itemData="item"></v-item>
        </v-scroll>
        <div v-if = 'doneDataListShow'>
            <div class="null-container" >

            </div> 
            <p class="nodate">暂无数据</p>      
        </div> 

          
      </mt-tab-container-item>
      <mt-tab-container-item id="C">

        <v-scroll  v-if ="startDataList && startDataList.length" :on-refresh="onRefresh"  :on-infinite="onInfinite"  :dataList="scrollData">
            <v-start  v-for="item in startDataList" :item="item"></v-start>
        </v-scroll>
        <div v-if = 'startDataListShow'>
            <div class="null-container" >

            </div> 
            <p class="nodate">暂无数据</p>      
        </div> 

          <!-- <div  v-if ="startDataList && startDataList.length">
              <v-start  v-for="item in startDataList" :item="item"></v-start>
          </div>
          <div v-else>
              <div class="null-container" >

              </div> 
              <p class="nodate">暂无数据</p>      
          </div>  -->

      </mt-tab-container-item>
    </mt-tab-container>

    <!-- <a href="/module/read.html" class="fixedBtn">
        待阅
    </a> -->

  </div>
</template>

<script>
import Vue from 'vue'
import { Navbar, TabItem, TabContainer, TabContainerItem } from 'mint-ui'
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);

import pullRefresh from "@/components/public/components/index"

import Item from '@/components/approve/approveItem'
const StartItem = r => require.ensure([], () => r(require('@/components/approve/start')), 'start');
// const showLoading = r => require.ensure([], () => r(require('@/common/js/loading')), 'loading');
import showLoading from '@/common/js/loading'
export default {
  name: 'app',
  data() {
    return {
      selected: 'A',
      tableader: true,
      num: 0,
      startDataList:[],
      waiteDataList:[],
      doneDataList:[],

      waitePageNum:1,
      donePageNum:1,
      startPageNum:1,

      isWaiteEnd:false,
      isDoneEnd:false,
      isStartEnd:false,

      waiteDataListShow:false,
      doneDataListShow:false,
      startDataListShow:false,

      


      scrollData:{
        noFlag: false //暂无更多数据显示
      },
      // top:'1rem',
      isEnd:false,
    };
  },

  methods: {
      
      //下拉刷新 和 上拉加载
      onRefresh(done) {

          this.resetPageNum(this.selected);
          this.resetListData(this.selected);
          this.initListData(this.selected);

          done(); // call done
      },
      onInfinite(done) {

        if (this.isLoadMore()) {
            this.resetPageNum(this.selected,"add");
            this.initListData(this.selected);          
        }
        done();
      },
      isLoadMore:function(){
        let allMore = this.$el.querySelectorAll('.load-more');

        if(this.isLoadEnd(this.selected)) {
            for (var i=0; i<allMore.length;i++) {
                allMore[i].style.display = 'none';
            }
            //走完数据调用方法
            this.scrollData.noFlag = true;
            return false;
        } else {
          
            for (var i=0; i<allMore.length;i++) {
                allMore[i].style.display = 'none';
            }
            return true;
        }
      },
      //


      PostAjax:function(url,params){
          return this.Axios.Post(url,params);
      },
      getStart:function(){
          let params = {
            pageSize: 10,
            pageNum: this.startPageNum
          }
          this.PostAjax(this.URL.myleaveByrecord.url, params)
              .then((res) => {  
                  
                  var result = res.data.datas;
                  if (!result) {
                      result = [];
                  }
                  this.startDataList = this.startDataList.concat(result);

                  var num = this.startDataList.length;
                  if (!res.data.total || num === res.data.total) {
                      this.isStartEnd = true;
                  }
                  if (num === 0) {
                    this.startDataListShow=true;
                  } 
                  this.decideLoad(this.selected);
                  showLoading.destroyInstance();
              }) 

      },
      getWaitAppro:function(){
          let params = {
            pageNum:this.waitePageNum,
            pageSize:10
          }
          this.PostAjax(this.URL.AuditBylist.url,params)
              .then((res)=>{
                  
                  var result = res.data.datas;
                  if (!result) {
                      result = [];
                  }
                  this.waiteDataList = this.waiteDataList.concat(result);
                  this.num = this.waiteDataList.length;
                  if (!res.data.total || this.num === res.data.total) {
                      this.isWaiteEnd = true;
                  }
                  if (this.num === 0) {
                    this.waiteDataListShow=true;
                  } 

                  this.decideLoad(this.selected);
                  showLoading.destroyInstance();
              })


              // if (!res.datas) {return;}
              // this.waiteDataList = this.waiteDataList.concat([]);
              // this.num = this.waiteDataList.length;
     
              // if (this.num === res.total) {

              //     this.isWaiteEnd = true;
              // }
              // if (this.num === 0) {
              //   this.waiteDataListShow=true;
              // } 

              // this.decideLoad(this.selected);


      },
      getDoneAprro:function(){
          let params = {
            pageSize: 10,
            pageNum: this.donePageNum
          }
          this.PostAjax(this.URL.examinationByrecord.url,params)
              .then((res)=>{
                  
                  var result = res.data.datas;
                  if (!result) {
                      result = [];
                  }
                  this.doneDataList = this.doneDataList.concat(result);
                  var num = this.doneDataList.length;
                  if (!res.data.total || num === res.data.total) {
                      this.isDoneEnd = true;
                  }
                  if (num === 0) {
                    this.doneDataListShow=true;
                  } 

                  this.decideLoad(this.selected);
                  showLoading.destroyInstance();
              })



          // var res={"status":1,"message":"查询成功","total":1,"datas":[{"Leave_end_section":"2","trialstep":"部门领导审批","leave_name":"事假","end_time":"2017-12-17","applyname":"孔颂杰","Leave_st_section":"1","deptname":"国际总部人力资源部（监察部）","applyId":48,"emplid":"00030044","start_time":"2017-12-16","name":"孔颂杰","leave_reason":"'16:53'","exectionId":"95001","leave_day":"0.0"}],"page":{"pageNum":1,"pageSize":10,"total":1,"pages":1},"token":""};
          // this.doneDataList = res.datas;
          // console.log(this.waiteDataList);
      },

      resetPageNum:function(newVal,add){
          switch(newVal){
              case 'A' : 
                    !add ? this.waitePageNum = 1 : this.waitePageNum++;
                    break;
              case 'B' : 
                    !add ? this.donePageNum = 1 : this.donePageNum++;
                    break;
              case 'C' : 
                    !add ?this.startPageNum = 1 : this.startPageNum++;
                    break;                                  
          }        
      },



      isLoadEnd:function(newVal){
          switch(newVal){
              case 'A' : 
                    return this.isWaiteEnd;
                    break;
              case 'B' : 
                    return this.isDoneEnd;
                    break;
              case 'C' : 
                    return this.isStartEnd;
                    break;                                  
          }            
      },

     decideLoad:function(newVal){

          switch(newVal){
              case 'A' : 
                    if (this.waiteDataList.length > 0){
                       this.isWaiteEnd ? this.scrollData.noFlag = true : this.scrollData.noFlag = false;
                       return false; 
                    } else {
                       return true;
                    };
                    break;
              case 'B' : 
                    if (this.doneDataList.length > 0){
                       this.isDoneEnd ? this.scrollData.noFlag = true : this.scrollData.noFlag = false;
                       return false; 
                    } else {
                       return true;
                    };
                    break;
              case 'C' : 
                    if (this.startDataList.length > 0){
                       this.isStartEnd ? this.scrollData.noFlag = true : this.scrollData.noFlag = false;
                       return false; 
                    } else {
                       return true;
                    };
                    break;                                  
          }
     },

      resetListData:function(newVal){

          switch(newVal){
              case 'A' : 
                    this.waiteDataList = [];
                    this.waitePageNum = 1;
                    this.isWaiteEnd = false;
                    break;
              case 'B' : 
                    this.doneDataList = [];
                    this.donePageNum = 1;
                    this.isDoneEnd = false;
                    break;
              case 'C' : 
                    this.startDataList = [];
                    this.startPageNum = 1;
                    this.isStartEnd = false;
                    break;                                  
          }
      },

      initListData:function(newVal){

          switch(newVal){
              case 'A' : 
                    this.getWaitAppro();
                    break;
              case 'B' : 
                    this.getDoneAprro();
                    break;
              case 'C' : 
                    this.getStart();
                    break;                                  
          }
      }
  },
  components: {

    MtNavbar: Navbar,
    'v-item':Item,
    'v-start':StartItem,
    'v-scroll':pullRefresh

  },

  watch: {
      selected:function(newVal,oldVal){

        //   if (!this.decideLoad(newVal)) {
        //       return ;
        //   }
          
          showLoading.showLoginPanel();
          setTimeout(function(){
                showLoading.destroyInstance();
          },14000)

          this.resetListData(newVal);
          this.initListData(newVal);
      }
  },
  mounted: function() {
      
    //   var token = location.search.split("=")[1];
    //   localStorage.setItem('token',token);
      
    //   this.Axios.Post(this.URL.webLogin.url,{}).then(res=>{
    //     this.leaderType_leader1 = this.selected;
    //     this.getWaitAppro();
    //   })

      this.getWaitAppro();
  }
};
</script>

<style >


      .fixedBtn{
          position: fixed;
          top:50%;
          bottom: 50%;
          z-index:12000;
          left: 10px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          font-weight: 600;
          width: 60px;
          border-radius: 50%;
          background-color: #04be02;
          color:#fff;
      }


    .nodate{
      text-align:center;
      font-size:0.32rem;
    }
    .null-container{
        height: 5.2rem;
        background:url(/static/imgs/nodata.png) no-repeat center;
    }



    .approve .mint-tab-item-label {
      margin: auto;
      font-size: 0.32rem;
      font-weight: 600;
    }

    .approve .navbar .tab-item-leader {
      width: 33.333%;
      position: relative;
    }

    .approve .mint-tab-container-wrap{
        display: block;
    }
    .approve .mint-tab-container-item{
      position:static;
    }
    .approve .navbar {
      width: 100%;
      border-bottom: 0.02rem solid #DDE5EE;
      box-shadow:0 0.02rem 0 #DDE5EE;
    }

    .approve .mint-tab-container {
      height: 100%;
      /*background-color: #f3f3f3;*/
      /* margin-top:1.74rem; */
      margin-top:1rem;
      
    }

    .approve .mint-navbar .mint-tab-item.is-selected {
      border-bottom: 0px;
    }

    .approve .mint-spinner-fading-circle {
      margin: 2rem auto;
    }
    html body{
      background-color:#fffffe;
    }
    html{
      height:100%;
    }
    body{
      height:calc(100% - 1rem);
    }


</style>
<style lang="less" scope="scope">
.approve {
  font-family:   "Microsoft YaHei", "微软雅黑";
  font-size: 0.28rem;
  height: 100%;
  position:relative;
  .head{
    position:fixed;
    top:0;
    width:100%;
    z-index:1000;
  }
  .tip{
    position: absolute;
    top: 0.12rem;
    right: 0.24rem;
    background-color: #E24040;
    color: #fff;
    padding-left: 0.02rem;
    font-size: 0.16rem;
    font-weight: normal;
    width: 0.36rem;
    height: 0.36rem;
    line-height: 0.36rem;
    text-align: center;
    border-radius: 50%;
  }
  .searchApprove{
    line-height: 0.7rem;
    height: 0.7rem;
    display:flex;
    align-items: center;
    font-size:0.32rem;
    // border-bottom:2px solid #F3F3F3;
    box-shadow:0 0.02rem 0 #F3F3F3;
    background-color:#fff;
    i{
      font-size:0.4rem;
      margin:auto 0.1rem auto 0.3rem;
    }
  }
  .top-bar {
    vertical-align: top;
    position: relative;
    background-color: #fff;
    .title-con {
        width: 100%;
        overflow-x: auto;
        display: inline-flex;
    }
  }



}
.approve::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  z-index: -100;
}


</style>

